<template>
  <div class="bar-echart">
    <base-echart :options="option"></base-echart>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue';
import baseEchart from '@/base-ui/base-echart';

const props = defineProps<{
  xLabels: string[];
  values: any[];
}>();

const option = computed(() => ({
  xAxis: {
    type: 'category',
    data: props.xLabels
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: props.values,
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}));
</script>

<style scoped lang="less"></style>
